<template>
  <view class="container">

    <view class="info-item">
    	<label class="label">品牌方：</label>
    	<view class="input">
    		<dict-label dict-type="oper_station_source" :value="station.source" />
    	</view>
    </view>
    <view class="info-item">
    	<label class="label">运维方：</label>
    	<view class="input">
    		<dict-label dict-type="oper_station_operation" :value="station.operation" />
    	</view>
    </view>
    <view class="info-item">
    	<label class="label">运维要求：</label>
    	<view class="input">{{ station.request }}</view>
    </view>
    <view class="info-item">
    	<label class="label">建站时间：</label>
    	<view class="input">{{ parseTime(station.buildTime) }}</view>
    </view>
    <view class="info-item">
    	<label class="label">交接时间：</label>
    	<view class="input">{{ parseTime(station.connetTime) }}</view>
    </view>
    <view class="info-item">
    	<label class="label">电站编号：</label>
    	<view class="input">{{ station.stationno }}</view>
    </view>
    <view class="info-item">
    	<label class="label">电站名称：</label>
    	<view class="input">{{ station.name }}</view>
    </view>
    <view class="info-item">
    	<label class="label">装机容量：</label>
    	<view class="input">{{ station.totalpower/1000 }} kW</view>
    </view>
    <view class="info-item">
    	<label class="label">业主姓名：</label>
    	<view class="input">{{ station.guestname }}</view>
    </view>
    <view class="info-item">
    	<label class="label">业主手机：</label>
    	<view class="input">{{ station.phone }}</view>
    </view>
    
    <view class="info-item">
    	<label class="label">详细地址：</label>
    	<view class="input">{{ station.addressstring }}</view>
    </view>
	<view class="info-item">
		<label class="label">坐标：</label>
		<view class="input">({{ station.latitude }}, {{ station.longitude }})</view>
	</view>
	<view class="showMap" >
		<view class="info-item">位置：</view>                                                     
		<map 
		  :longitude="station.longitude" 
		  :latitude="station.latitude" 
		  :scale="15" 
		  show-compass 
		  show-scale
		  :enable-scroll="false"
		  :enable-zoom="false"
		  :enable-rotate="false"
		  :enable-3D="false"
		  :enable-overlooking="false">
		</map>
	</view>
	
	<view v-for="(label, key) in imageLabels" :key="key" class="image-section">
	  <text class="image-title">{{ label }}：</text>
	  <view class="image-list">
	    <image
	      v-for="(url, index) in station[key + 'PicUrls']"
	      :key="index"
	      :src="url"
	      mode="aspectFill"
	      class="preview-image"
	      @click="previewImageGroup(key, index)"
	    />
	  </view>
	</view>

  </view>
</template>

<script>
import request from '@/utils/request';
import { parseTime } from '@/utils/ruoyi' // ✅ 路径改为 ruoyi.js

export default {
  data() {
    return {
		stationId:"",
		station: {},
		imageLabels: {
		      gate: '电站门头照片',
		      inv: '逆变器照片',
		      col: '采集器照片',
		      amm: '电表箱照片',
		      com: '电站俯视图',
		      location: '电站周围15米方位图',
		},
    };
  },
  onLoad(options) {
      // 1. 参数解码和校验
      if (!options.id) {
        uni.showToast({ title: '缺少站点ID', icon: 'none' });
        setTimeout(() => uni.navigateBack(), 1500);
        return;
      }
  
      // 2. 赋值并转换为数字类型
      this.stationId = Number(decodeURIComponent(options.id));
  
      // 3. 调用数据加载
      this.fetchStationDetails(this.stationId);
    },
  methods: {
	  parseTime,
    async fetchStationDetails(id) {
      try {
        const response = await request({ url: `/oper/station/get?id=${id}`, method: 'GET' });
        if (response.code === 0) {
          this.station = response.data;
        }
      } catch (error) {
        uni.showToast({ title: '加载失败', icon: 'none' });
      }
    },
	previewImageGroup(type, index) {
	  const urls = this.station[type + 'PicUrls'] || []
	  uni.previewImage({
	    current: urls[index],
	    urls: urls
	  });
	}
  }
};
</script>

<style>
.container { padding: 20px; }
.form-item {
  margin: 32rpx;
  justify-content: center;
}

.label {
  display: block;
  font-size: 28rpx;
  margin-bottom: 16rpx;
  font-weight: bolder;
}

.input {
  height: 80rpx;
  padding: 9px;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 15px;
}
.image-section {
  margin-top: 30rpx;
}

.image-title {
  font-weight: bold;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  display: block;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.preview-image {
  width: 220rpx;
  height: 160rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.image-list image {
  width: calc((100% - 20px) / 3); /* 3 个图片一排，减去间距 */
  height: 100px;
  object-fit: cover; /* 保持图片比例并裁剪溢出部分 */
  border-radius: 8px; /* 图片圆角 */
}
</style>